<template>
	<view class="waitHandlePage">
		<view v-if="waitHandleList.length==0" class="u-margin-top-300">
			<u-empty text="暂无申请维修数据" mode="data"></u-empty>
		</view>
		<!-- 审批卡 -->
		<view v-if="waitHandleList.length>0">
			<u-card v-for="(handleItem,index) in waitHandleList" :key="index" title="维修卡" sub-title="凭卡维修,认证保障">
				<view slot="body">
					<u-field label="维修房屋" :value="handleItem.buildingName+'/'+handleItem.unitName+'/'+handleItem.roomName" :disabled="true"></u-field>
					<u-field label="联系姓名" :value="handleItem.connectName" :disabled="true"></u-field>
					<u-field label="联系手机" :value="handleItem.connectPhone" :disabled="true"></u-field>
					<u-field label="维修类型" :value="handleItem.type | malType" :disabled="true"></u-field>
          <u-field label="维修进度" :value="handleItem.malfunctionStatus+'' | malStatus" :disabled="true"></u-field>
					<u-field label="上门时间" :value="handleItem.doorTime" :disabled="true"></u-field>
				</view>
				<view slot="foot" class="u-flex u-flex-nowrap u-row-around">
          <u-button type="warning" shape="circle" @click="generatorCode(handleItem.id)">维修码</u-button>
				</view>
			</u-card>
		</view>


		<!-- 信息提示 -->
		<view>
			<u-toast ref="uMsg"></u-toast>
		</view>

    <!--    维修码-->
    <view>
      <u-modal v-model="showModal" title="维修码" :title-style="{padding:'30rpx'}" :content-style="{'text-align':'center'}"
               :show-confirm-button="false">
        <tki-qrcode cid="qrCode" :val="qrVal" ref="qrCode" :onval="true" @result="qrResult"></tki-qrcode>
        <view class="u-flex u-flex-nowrap u-row-around custom">
          <u-button :plain="true" size="mini" @click="handleBarCode" shape="circle">确定</u-button>
          <u-button :plain="true" size="mini" shape="circle" @click="saveBarCode">保存</u-button>
        </view>
      </u-modal>
    </view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				waitHandleList: [], //代办集合
        showModal: false,
        qrVal: '', //二维码内容
        barcodeUrl: '', //二维码地址
			}
		},
		onLoad() {
			this.getWaitHandleList();
		},
		methods: {
			/* 获取代办集合数据 */
			getWaitHandleList() {
				// const currentCommunity = uni.getStorageSync('current_community');
        let user = uni.getStorageSync('ownerInfo')
				if (user) {
					this.$u.get('/new/new/malfunction/userMalfunction/' + user.id).then(res => {
						console.log('获取的待审批数据', res)
						if (res.code == 0) {
							this.waitHandleList = res.data
						} else {
							this.$refs.uMsg.show({
								type: 'warning',
								title: res.msg
							})
						}
					})
				}
			},

      /* 生成二维码 */
      generatorCode(id) {
        this.qrVal = id;
        this.showModal = true;
        // this.$refs.qrCode._makeCode()
        this.$nextTick(()=>this.$refs.qrCode._makeCode())
      },
      handleBarCode() {
        console.log('清空二维码')
        this.$refs.qrCode._clearCode()
        this.showModal = false
      },
      qrResult(res) {
        console.log('二维码信息', res)
        this.barcodeUrl = res
      },
      /* 保存二维码 */
      saveBarCode() {
        this.$refs.qrCode._saveCode();
        this.$u.toast('已保存到图库')
        this.showModal = false
      },
		}
	}
</script>

<style lang="scss">
  .custom {
    margin-top: 30rpx;
    margin-bottom: 20rpx;
  }
</style>
